// JavaScript Document
/*
	许愿墙纸条插件
	凌天蓝 2010.2.15

*/
(function($) {

    /*$.fn.jWish.default = {
    renderTo: $(document.body),
    closable: true,
    width:150,
    height:220,
    showTitle:false,
    bodyCssName:'jquery-wish-body',
    titleCssName: 'jquery-wish-title',
    closeBtnCssName: 'jquery-wish-closeBtn',
    senderCssName: 'jquery-wish-sender',
    dateCssName:'jquery-wish-date'
    };*/
	var iMaxZ = 1000;   // 定义最上层权值
	var $mask = null;   // 遮罩层
	
    $.extend($.fn, {
        jWish: function(config) {
			
            var wish = $.extend({
                renderTo: $(document.body),// 位于哪个元素里面
                id: 0,					   // 字条编号
				className:'wish',          // $('div.wish')可以选出所有字条
                closable: true,            // 是否显示关闭按钮
                title: '',                 // 标题
                content: '',               // 内容
                from: '',                  // 发送人
                date: '',                  // 日期
                z: 9999,                   // 默认层权值
				maskCssName:'jquery-wish-mask',    // 遮罩层样式类名
                skin: {
                    width: 240,                                      // 字条宽度
                    height: 190,                                     // 字条高度
                    bodyCssThemeName: 'jquery-wish-body-default',                 // 字条样式类名(主要设定背景图片)
                    titleCssThemeName: 'jquery-wish-title-default',               // 字条标题样式类名
                    contentCssThemeName: 'jquery-wish-content-default',           // 字条内容样式类名
                    closeBtnCssThemeName: 'jquery-wish-closeBtn-default',		  // 关闭按钮样式类名
                    senderCssThemeName: 'jquery-wish-sender-default',			  // 发送者样式类名
                    dateCssThemeName: 'jquery-wish-date-default',  				  // 日期样式类名
					bodyCssColorName: 'jquery-wish-body-default-pink',                 // 字条样式类名(主要设定背景图片)
                    titleCssColorName: 'jquery-wish-title-default-pink',               // 字条标题样式类名
                    contentCssColorName: 'jquery-wish-content-default-pink',           // 字条内容样式类名
                    closeBtnCssColorName: 'jquery-wish-closeBtn-default-pink',		  // 关闭按钮样式类名
                    senderCssColorName: 'jquery-wish-sender-default-pink',			  // 发送者样式类名
                    dateCssColorName: 'jquery-wish-date-default-pink',  				  // 日期样式类名
                },
				area:{
					left:0,								// 左边界
					top:0,								// 上边界
					right: 1000,//$(document.body).width,		// 右边界
					bottom: 700//$(document.body).height		// 下边界
				},
				hide:function(){
					$wish.css('display','none');	
				}
            }, config);

            wish.renderTo = (typeof wish.renderTo == 'string' ? $(wish.renderTo) : wish.renderTo);
			
			// 纸条(左上点 top left)显示边界
			var _left = wish.area.left;
			var _right = wish.area.right;
			var _top = wish.area.top;
			var _bottom = wish.area.bottom;
			
			// 字条全部在边界内,重定义边界
			_right = _right - _left > wish.skin.width ? _right : _left + wish.skin.width;
			_bottom = _bottom - _top > wish.skin.height ? _bottom : _top + wish.skin.height;
			
			_right = _right - wish.skin.width;
			_bottom = _bottom - wish.skin.height;
			
			/* 计算随机位置 */
			/* val1 < val2 */
			function boundRandom(val1,val2){
				var res = parseInt(Math.random() * (val2 - val1) + val1);
				return res;
			}
			function position(){
				return {left:boundRandom(_left, _right), top:boundRandom(_top, _bottom)}
			};

			
			// 此纸条的随机位置
			var _p = position();
			
            /* ---------->
            html tree:
            <div>                  ---->wish body
				<div></div>          |---->title
				<div></div>		 	 |---->closeBtn
				<div></div>          |----> content
				<div></div>		     |---->sender			
				<div></div>          |---->date
            </div>
            <-----------*/
			var $wish = $('<div><div></div><div></div><div></div><div></div><div></div></div>')
								 .addClass(wish.className)
								 .addClass(wish.skin.bodyCssThemeName)
								 .addClass(wish.skin.bodyCssColorName)
								 .css('height', wish.skin.height)
								 .css('width', wish.skin.width)
								 .css('position','absolute')
								 .css('left', _p.left + 'px')
								 .css('top',_p.top + 'px')
								 .css('z-index', wish.z)
								 .appendTo(wish.renderTo);
			$wish.bind('mousedown', function(){
				$(this).css('z-index', ++iMaxZ)
			});
			
			$wish.dblclick(function(){
				if($mask == null){
					$mask = $('<div id="jquery-wish-mask"></div>').addClass(wish.maskCssName).appendTo($(document.body));
					
					// 浏览器高度和宽度
					var sWidth = Math.max(document.body.scrollWidth, document.documentElement.clientWidth);
					var sHeight = Math.max(document.body.scrollHeight, document.documentElement.clientHeight);
					$mask.css({'width': sWidth,'height': sHeight});
					
					$mask.click(function(){
						$(this).css('display','none');
					});
					
				}
				$mask.css('display','block')
					 .css('z-index', ++iMaxZ);

				$(this).css('z-index',++iMaxZ);
				
			});

			// 应用样式,绑定方法
            $wish.find('div:eq(0)').html('字条编号:' + wish.id)
				 .addClass(wish.skin.titleCssThemeName)
				 .addClass(wish.skin.titleCssColorName);
			// 隐藏纸条
			$wish.find('div:eq(1)')
				 .addClass(wish.skin.closeBtnCssThemeName)
				 .addClass(wish.skin.closeBtnCssColorName)
				 .click(function(){$wish.css('display','none')});            												 			$wish.find('div:eq(2)').html('这里显示内容....')
				 .addClass(wish.skin.contentCssThemeName)
				 .addClass(wish.skin.contentCssColorName);
			$wish.find('div:eq(3)').html('凌天蓝')
				 .addClass(wish.skin.senderCssThemeName)
				 .addClass(wish.skin.senderCssColorName);
			$wish.find('div:eq(4)').html('2010-1-1 23:32')
				 .addClass(wish.skin.dateCssThemeName)
				 .addClass(wish.skin.dateCssColorName);

            return $wish;
        }





    });


})(jQuery);